<script>
import { formatOneDayComparison, getDataDateOptions, getOneDayComparison, getStoreOptions } from "@/views/store/tb/api";
import { formatPercentage } from "@/utils/service";

export default {
  name: "oneDayComparison",
  data() {
    return {
      show: false,
      query: {
        storeName: "",
        date1: "",
        date2: "",
      },
      queryRules:{
        storeName:[
          {required: true,message: "请输入活动名称"}
        ],
        date1: [
          {required: true,message: "请选择数据日期1"}
        ],
        date2: [
          {required: true,message: "请选择数据日期2"}
        ]
      },
      options: {
        storeNameLoading: false,
        storeName: [],
        date1: [],
        date1Loading: false,
        date2: [],
        date2Loading: false,
      },
      table: {
        data: []
      }
    };
  },
  methods: {
    storeOptions() {
      this.options.storeNameLoading = true;
      getStoreOptions(this, function(r) {
        this.options.storeName = r;
      }.bind(this), function(f) {
        this.options.storeNameLoading = false;
      }.bind(this));
    },
    dataDate1Options() {
      this.options.date1Loading = true;
      getDataDateOptions(this, function(r) {
        this.options.date1 = r;
      }.bind(this), function(f) {
        this.options.date1Loading = false;
      }.bind(this));
    },
    dataDate2Options() {
      this.options.date2Loading = true;
      getDataDateOptions(this, function(r) {
        this.options.date2 = r;
      }.bind(this), function(f) {
        this.options.date2Loading = false;
      }.bind(this));
    },
    oneDayComparison(){
      this.$refs["queryForm"].validate(function(valid) {
        if (valid) {
          getOneDayComparison(this,this.query,function(r) {
            this.table.data = formatOneDayComparison(r)
            console.log(this.table.data);
          }.bind(this))
        }else{
          return false
        }
      }.bind(this))
    },
    /** 将表格值转为百分比*/
    valueToPercentage(row, column, cellValue, index) {
      return cellValue ? cellValue + "%" : "-";
    },
    rowStyle({row}){
      if (row.diffValue > 0){
        return {
          color: "#ff7866",
          fontSize: "15px",
          fontWeight: "bold"
        }
      }else if (row.diffValue === 0){
        return {
          color: "#2f3542",
          fontSize: "15px",
          fontWeight: "bold"
        }
      }else{
        return {
          color: "#66ff78",
          fontSize: "15px",
          fontWeight: "bold"
        }
      }
    }
  }
};
</script>

<template>
  <div style="display: inline-block">
    <el-button size="mini" type="primary" @click="show=true">单日对比</el-button>
    <el-dialog title="单日对比" :visible.sync="show" :fullscreen=true>
      <div>
        <div>
          <el-form :model="query" :inline=true size="mini" ref="queryForm" :rules="queryRules">
            <el-form-item label="店铺名称" prop="storeName">
              <el-select
                v-model="query.storeName"
                placeholder="请选择店铺名称"
                :filterable=true
                clearable
                @focus="storeOptions"
                :loading="options.storeNameLoading"
                loading-text="加载中"
              >
                <el-option
                  v-for="item in options.storeName"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="日期1" prop="date1">
              <el-select
                :filterable=true
                clearable
                @focus="dataDate1Options"
                v-model="query.date1"
                placeholder="请选择一号日期"
                :loading="options.date1Loading"
                loading-text="加载中"
              >
                <el-option
                  v-for="item in options.date1"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="日期2" prop="date2">
              <el-select
                :filterable=true
                clearable
                @focus="dataDate2Options"
                v-model="query.date2"
                placeholder="请选择二号日期"
                :loading="options.date2Loading"
                loading-text="加载中"
              >
                <el-option
                  v-for="item in options.date2"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="mini" type="success" @click="oneDayComparison">请求数据</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table
            :row-style="rowStyle"
            :data="table.data"
            height="70vh"
          >
            <el-table-column
              prop="field"
              label="指数名"
            >
            </el-table-column>
            <el-table-column
              prop="leftData"
              label="日期1数据"
            >
            </el-table-column>
            <el-table-column
              prop="rightData"
              label="日期2数据"
            >
            </el-table-column>
            <el-table-column
              prop="diffValue"
              label="差值"
            >
            </el-table-column>
            <el-table-column
              prop="diffPercentage"
              label="相差百分比"
              :formatter="valueToPercentage"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style>
</style>